<template>
  <div class="pest">
    <div class="pest-left">
      <div class="left-title">设备列表</div>
      <div class="left-content">
        <a-menu mode="inline" theme="light" :defaultOpenKeys="defaultOpenKeys" :selectedKeys="selectedKeys">
          <a-sub-menu key="m1">
            <template #icon><pull-request-outlined /></template>
            <template #title>抚远虫情</template>
            <a-menu-item
              v-for="(item, index) in addressList"
              :key="item.deviceName"
              @click="site(item.deviceName, index)"
            >
              <template #icon><PieChartOutlined /></template>
              <div class="circle"></div>
              <i> {{ item.name }}{{ item.deviceName }}</i>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </div>
    <div class="pest-right">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuerys">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="9" :md="10" :sm="30">
              <a-form-item label="采样时间">
                <a-range-picker v-model="queryParam.buildTime" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuerys" icon="search">搜索</a-button>
                <a-button type="primary" @click="searchResets" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      <!-- 数据-->
      <div>
        <a-list
          :grid="{ gutter: 16, column: 4 }"
          :dataSource="dataSource"
          :pagination="{
            total,
            pageSize: 8,
            onChange: page => onPageChange(page)
          }"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-card :hoverable="true">
              <a-card-meta>
                <div class="meta-cardInfo" slot="description">
                  <div class="meta-cardInfo-content">
                    <img style="width: 100%;" :src="item.photo" :preview="item.imgUrl" />
                    <p>
                      设备名称： <span>{{ item.devictNo }}</span>
                    </p>
                    <p>
                      采样时间： <span>{{ item.cysj }}</span>
                    </p>
                    <p>
                      害虫数量： <span>{{ item.hcsl }}只</span>
                    </p>
                    <p>
                      分析报告： <span>{{ item.analysisReport }}</span>
                    </p>
                  </div>
                </div>
              </a-card-meta>
            </a-card>
          </a-list-item>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'pest',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      defaultOpenKeys: ['m1'],
      page: 1,
      total: 0,
      code: '',
      defaultSelectedKeys: '',
      queryParam: {
        buildTime: ''
      },
      starttime: '',
      endtime: ''
    }
  },
  created() {
    this.getTypeList()
  },
  computed: {},
  methods: {
    //搜索
    searchQuerys() {
      this.starttime = moment(this.queryParam.buildTime[0]['_d']).format('YYYY-MM-DD')
      this.endtime = moment(this.queryParam.buildTime[1]['_d']).format('YYYY-MM-DD')
      this.getList(this.page, this.code, this.starttime, this.endtime) //数据信息列表
    },
    //重置
    searchResets() {
      this.page = 1
      this.starttime = ''
      this.endtime = ''
      this.queryParam.buildTime = ''
      this.selectedKeys = this.addressList[0]['code']
      setTimeRest(new Date())
      this.getList(this.page, this.addressList[0]['code'], this.starttime, this.endtime)
    },
    //页码改变的回调
    onPageChange(page) {
      this.getList(page, this.code, this.starttime, this.endtime) //数据信息列表
    },
    //站点左侧数据
    getTypeList() {
      this.addressList = [{}]

      getAction('http://localhost:51006/zwgl/dtwlwjc/zwglEquipmentStatus/lista').then(res => {
        this.addressList = res.result
        this.selectedKeys = [this.addressList[0]['deviceName']]
        this.getList(this.page, this.addressList[0]['deviceName'], this.starttime, this.endtime)
        console.log('dashaibi', this.addressList)
      })
    },
    //站点右侧数据
    getList(page, code, starttime, endtime) {
      console.log(code)
      this.dataSource = []
      let result = {}
      getAction('http://localhost:51006/zwgl/dtwlwjc/zwglStatisticalData/chongqing', {
        devict_no: code,
        page: page,
        starttime: starttime,
        endtime: endtime
      }).then(res => {
        result = res.result.records
        console.log('aaa', res)
        this.dataSource = result
        this.total = res.result.total
      })
    },
    //站点点击切换数据
    //站点点击切换数据
    site(code, index) {
      this.selectedKeys = this.addressList[index]['code']
      // console.log(code)
      this.code = code
      this.starttime = ''
      this.endtime = ''
      this.page = 1
      this.getList(this.page, code, this.starttime, this.endtime)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style scoped>
.pest {
  margin: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
}
.pest-left {
  width: 20%;
  height: 700px;
  min-height: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}
.pest-left .circle {
  background: #30b08f;
  clip-path: circle(50%);
  height: 10px;
  width: 10px;
  margin-right: 10px;
}
.pest-left .ant-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.left-title {
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  font-size: 15px;
}
.pest-right {
  width: 80%;
  margin: 0px 20px;
}
.pest-right .ant-form-item-label label {
  color: #606266 !important;
  font-weight: 700;
}
.pest-right .ant-card {
  border-radius: 4px;
  border: 2px solid #ddd;
  background-color: #fff;
  webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
}
.pest-right .ant-card-meta-description {
  color: black !important;
}
</style>

